<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/base.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客服聊天系统</title>
<style type="text/css">
	.p-c-flexwrapper {
	    width: 49%;
		display:inline;
		align-items:center;
		margin-right:16px;
		margin-bottom:32px;
		
	}
	.p-c-flexwrapper > span {
		width:80px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
	.input-auto {
		width:auto;
		display: inline;
		margin-bottom: 20px;
	}
	table th,table tr,table td {
	text-align: center;
	vertical-align:middle;
	}
</style>
</head>
<body>
	<div style="display:flex;"><button  class="save btn btn-primary btn-lg" >新增</button></div>
	<table id="table-i-qqAccountList" class="table table-striped table-bordered table-hover" style="margin-top: 20px;">
		<thead>
			<tr>
			<th style="display:none;"></th>
			<th style="display:none;"></th>
			<th>客服名称</th>
			<th>客服账号</th>
			<th>客服类型</th>
			<th>ip地址</th>
			<th>操作时间</th>
			<th>状态</th>
			<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	
	<!-- 新增 -->
 	 	<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		        <div class="modal-header" style="height: 10px;">
					<span style="float: left; font-size:13px;margin-top: -10px;">添加客服 </span>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
				</div>
		            <div class="modal-body">
		            	<p class="p-c-flexwrapper"><span>客服昵称：</span><input id="obj-nick_name" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>客服帐号：</span><input id="obj-name" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>客服密码：</span><input id="obj-pass" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>IP&nbsp;&nbsp;&nbsp;地址： </span><input id="obj-ip" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>客服类型：</span><select id="obj-admin_type" required class="form-control input-auto">
		            		<option value="1">充值提现</option>
		            		<option value="2">游戏优惠</option>
		            		<option value="3">修改信息</option>
		            	</select>
		            	</p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitSaveKefu">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		  
		  <!-- 修改 -->
		   	 	<div class="modal fade" id="updateAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		          <div class="modal-header" style="height: 10px;">
					<span style="float: left; font-size:13px;margin-top: -10px;">修改资料</span>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
				</div>
		            <div class="modal-body">
	            	<p class="p-c-flexwrapper"><span>客服昵称：</span><input id="update-nick_name" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>客服密码：</span><input id="update-pass" class="form-control input-auto" placeholder="请输入新密码"></p>
		            	<p class="p-c-flexwrapper"><span>IP&nbsp;&nbsp;&nbsp;地址： </span><input id="update-ip" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>客服类型：</span><select id="update-admin_type" required class="form-control input-auto">
		            		<option value="1">充值提现</option>
		            		<option value="2">游戏优惠</option>
		            		<option value="3">修改信息</option>
		            	</select>
		            	</p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitUpdateKefu">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		  
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script type="text/javascript">
		$(".save").on("click", function(e) {
			$("#addAndEditModal").modal("show")
		})
		$("#table-i-qqAccountList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[10, 20],
	       "searching": false,
	       "dom": `ftp`,
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "drawCallback": function( settings ) {
	        	 $(".input-c-mySwitch").bootstrapSwitch()
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/kf/findAllKeFuUser.do",
	        	 "dataSrc": function(json) {
	        		 var newJson = json.data
	        		 $("div").data("newData",newJson)
	        		 for (var i = 0; i < newJson.length; i++) {
	         			var item = newJson[i]
	         			 var stateValue = ""
	        			 if (item.state == "1") {
	        				 stateValue = "checked"
	        			 } else {
	        				 stateValue = ""
	        			 }
	         			switch(item.admin_type){
	         			case 1:
	         				item.admin_type="充值提现";
	         				break;
	         			case 2:
	         				item.admin_type="游戏优惠";
	         				break;
	         			case 3:
	         				item.admin_type="修改信息";
	         				break;
	         			}
	         			item.typeValue = item.admin_type
         				item.admin_type = "<span class='bootstrap-background " + item.admin_type + "'>" + item.admin_type  + "</span>"
         				item.state = "<input class='input-c-mySwitch' data-size='small' type='checkbox' " + stateValue + " data-on-text='启用' data-on-color='success' data-off-color='danger' data-off-text='禁用' />"
	        		 }
	        		 return newJson;
	        	 }
	         },
	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
						 {"data": "pass", "className": "hidden-td pass-edit-td"},
	                     {"data": "nick_name", "className": "nick_name-edit-td"},
	                     {"data": "name", "className": "name-edit-td"},
	                     {"data": "admin_type", "className": "admin_type-edit-td"},
	                     {"data": "ip", "className": "ip-edit-td"},
	                     {"data": "created_time", "className": "created_time-edit-td"},
	                     {"data": "state", "className": "state-edit-td"},
	                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editBankInfo btn-sm'>修改</button> <button class='btn btn-danger btn-c-delBankInfo btn-sm'>删除</button>"},
	                 ]        
	   		 })	
	   		 
				$("#button-i-submitSaveKefu").on("click",function(event){
					switch(""){
						case $("#obj-nick_name").val():
							alert("请填写完整信息");
							return ;
						case $("#obj-name").val():
							alert("请填写完整信息");
							return ;
						case $("#obj-pass").val():
							alert("请填写完整信息");
							return ;
						case $("#obj-ip").val():
							alert("请填写完整信息");
							return ;
						case $("#obj-admin_type").val():
							alert("请填写完整信息");
							return ;
					}
						var result = checkPassWordValid($("#obj-pass").val())
						if (result != "ok") {
							alert(result)
							return
						} 
						var ipValid = isValidIP($("#obj-ip").val())
					if (!ipValid) {
						alert("IP地址格式有误")
						return
					} 
					$("#addAndEditModal").modal("hide")
			 	$.ajax({
					type: "POST",
		       	 	url: "/kf/saveKeFuUser.do",
		       	 	data:{
		       	 		"nick_name":$("#obj-nick_name").val(),
		       	 		"name":$("#obj-name").val(),
		       	 		"pass":$("#obj-pass").val(),
		       	 		"ip":$("#obj-ip").val(),
		       	 		"admin_type":$("#obj-admin_type").val()
		       	 		},
		       	 	success:function(data){
		       	 		if(data.message==0){
			   	 			alert(data.data);
		       	 		}else{
		       	 			alert("操作成功!");
		       	 		}
		       	 		$("#table-i-qqAccountList").DataTable().ajax.reload();
		   	 		},
		   	 		
		       	 	
				}) 
			})
			
			bindJinYongQiYongSwitch("#table-i-qqAccountList", "/kf/updateKeFuUser.do", "state")
		
			function autoPPSel(id, val) {
				var sel_len = $(id)[0].options.length;
				for(i = 0; i < sel_len; i++) {
					if($(id)[0].options[i].value == val) {
						$(id)[0].options[i].selected = true;
						break;
					}
				}
			}
		
			var id=0;	
			$("#table-i-qqAccountList").on("click", ".btn-c-editBankInfo", function(event) {
				$("#updateAndEditModal").modal("show")
				id=$(this).parent().siblings(".id-edit-td").text()
				$("#update-nick_name").val($(this).parent().siblings(".nick_name-edit-td").text())
				$("#update-ip").val($(this).parent().siblings(".ip-edit-td").text())
				var num = 0;
				if($(this).parent().siblings(".admin_type-edit-td").text()=="充值提现"){
					num = 1;
				}else if($(this).parent().siblings(".admin_type-edit-td").text()=="游戏优惠"){
					num = 2;
				}else{
					num = 3;
				}
				autoPPSel("#update-admin_type", num);
			})
		 		
			 $("#updateAndEditModal").on("click", "#button-i-submitUpdateKefu", function(event) {
					switch(""){
					case $("#update-nick_name").val():
						alert("请填写完整信息");
						return ;
					case $("#update-ip").val():
						alert("请填写完整信息");
						return ;
					case $("#update-admin_type").val():
						alert("请填写完整信息");
						return ;
				}
				 if($("#update-pass").val()!=''){
						var result = checkPassWordValid($("#update-pass").val())
						if (result != "ok") {
							alert(result)
							return
						} 
					}
					var ipValid = isValidIP($("#update-ip").val())
					if (!ipValid) {
						alert("IP地址格式有误")
						return
					} 
				 $("#updateAndEditModal").modal("hide")
				$.ajax({
					type: "POST",
		       	 	url: "/kf/updateKeFuUser.do",
		       	 	data:{
		       	 		"id":id,
			       	 	"nick_name":$("#update-nick_name").val(),
		       	 		"pass":$("#update-pass").val(),
		       	 		"ip":$("#update-ip").val(),
		       	 		"admin_type":$("#update-admin_type").val()
		       	 		},
		       	 	success:function(data){
		       	 		$("#table-i-qqAccountList").DataTable().ajax.reload();
		       	 		alert("修改成功")
		       	 		
		       	 	}
				})
			}) 
			
			$("#table-i-qqAccountList").on("click", ".btn-c-delBankInfo", function(event) {
				$.ajax({
					type: "POST",
		       	 	url: "/kf/deleteKeFuUser.do",
		       	 	data:{
		       	 		"id":$(this).parent().siblings(".id-edit-td").text()
		       	 		},
		       	 	success:function(data){
		       	 	$("#table-i-qqAccountList").DataTable().ajax.reload();
		       	 		alert("删除成功")
		       	 	}
				})
			})
	</script>
</body>
</html>